<template>
    <el-main class="login-main">
        <el-card class="left">
            <router-view></router-view>
        </el-card>
        <el-card class="right">
            <div class="bigtitle">
                {{isLogin?'登录':'注册'}}
            </div>
            <el-form :model="form" :rules="rules" ref="form">
                <div class="title">用户名</div>
                <el-form-item prop="username">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <div class="title">密码</div>
                <el-form-item prop="password">
                    <el-input v-model="form.password" type="password"></el-input>
                </el-form-item>
            </el-form>
            <div class="btns">
                <el-button type="primary" @click="login">
                    {{isLogin?'登录':'注册'}}
                </el-button>
                <el-button type="warning" @click="reset">
                    重置
                </el-button>
            </div>
            <div class="line"></div>
            <div class="login" @click="changelogin" v-if="!isLogin">
                <span>已有账户?</span><span>登录</span>
            </div>
            <div class="login" @click="changelogin" v-else>
                <span>暂无账户?</span>
                <span>注册</span>
            </div>
            <el-dialog title="通知" :visible.sync="dialogVisible" width="30%">
                <span>暂时未开放注册功能，请使用默认管理员账户,账户:admin,密码:123456,进行登录</span>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                </template>
            </el-dialog>
        </el-card>

    </el-main>
</template>

<script>
export default {
    data () {
        return {
            isLogin: true,
            dialogVisible: false,
            form: {
                username: '',
                password: '',
                email: ''
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        // 切换登陆注册
        changelogin () {
            this.isLogin = !this.isLogin
        },
        // 登录
        login () {
            this.$refs.form.validate(async valid => {
                if (!valid) return this.$message.error('表单验证错误')
                if (!this.isLogin) {
                    return this.dialogVisible = true
                }
                const { data: res } = await this.$http.post('login', this.form)
                sessionStorage.setItem('token', res.data.token)
                if (res.meta.status !== 200)
                    return this.$message.error('登陆错误,' + res.meta.msg)
                else {
                    this.$router.push({
                        name: 'home'
                    })
                    this.$message.success('登陆成功')
                }
            })
        },
        // 重置表单
        reset () {
            this.$refs.form.resetFields()
        }
    }
}
</script>

<style lang="less" scoped>
.login-main {
    background-color: #edf7f9;
    height: 100%;
    .left {
        background-color: #0099bb;
        border-radius: 30px;
        width: 50%;
        height: 85%;
        margin-top: 1%;
        margin-left: 16%;
        position: relative;
    }
    .right {
        border-radius: 30px;
        width: 38%;
        height: 80%;
        top: 15%;
        right: 17%;
        position: absolute;
        .bigtitle {
            font-size: 40px;
            margin-left: 10%;
            margin-bottom: 6%;
        }
        .title {
            margin: 3% 0% 3% 10%;
        }
        .el-input {
            width: 80%;
            text-align: center;
            margin-left: 10%;
        }
        .btns {
            margin-right: 7%;
            .el-button {
                float: right;
                margin-right: 3%;
                margin-top: 5%;
            }
        }

        .line {
            width: 80%;
            margin-left: 10%;
            margin-top: 20%;
            border-bottom: 4px solid#F3F3F3;
        }
        ::v-deep .el-form-item__error {
            margin-left: 10%;
        }
        .login {
            margin-left: 10%;
            margin-top: 2%;
            :last-child {
                color: #66b1ff;
            }
        }
    }
}
::v-deep .el-carousel__button {
    background-color: #0099bb;
}
</style>